<template>
  <div class="box">
    <el-form size="medium" ref="expressForm" :model="order" :rules="itemRules" label-width="100px">
      <el-form-item label="收货人">{{ order.consignee }}</el-form-item>
      <el-form-item label="联系电话">{{ order.iphone }}</el-form-item>
      <el-form-item label="收货地址">{{ order.address }}</el-form-item>
      <el-form-item label="取消原因">
        <el-select v-model="order.r_id"><el-option v-for="item in reasonslist" :key="item.id" :label="item.reason" :value="item.id"></el-option></el-select>
      </el-form-item>
      <el-form-item label="描述"><el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="order.reason"></el-input></el-form-item>
      <el-form-item><el-button v-if="status == 1" type="primary" @click="saveData">确定取消</el-button></el-form-item>
    </el-form>
  </div>
</template>
<script>
import {getexpress} from '@/api/shop/freight';
import {getOrder, getDistribution, formalCancel, getdadareasons, localDelivery, dadaPay, expressOrder, getOrderStoreList, getcityCode} from '@/api/shop/order';

export default {
  name: 'orderExpress',
  data() {
    return {
      isLoading: false,
      expressList: [],
      disabled: false,
      deliver_type: 1,
      status: 1,
      thirdlist: [
        {
          label: '商家配送',
          value: 0
        }
      ],
      fee: 0,
      express_type: 0,
      itemRules: {
        r_id: [
          {
            required: true,
            message: '请选择取消原因'
          }
        ],

      },
      cityCode: '',
      reasonslist: [],
      order: {}
    };
  },
  // props: {
  //   order: {
  //     type: Object,
  //     default: function() {
  //       return {};
  //     }
  //   }
  // },

  methods: {
    init(id) {
      this.orderId = id;
      this.isLoading = true;
      getOrder(id).then(res => {
        let o = res.msg;
        o.r_id = '';
        o.reason = '';
        this.order = o;
        this.getdadareasons();
      });
    },
    getdadareasons() {
      // this.cancalobj.oid = this.order.id;
      getdadareasons({oid: this.order.id}).then(res => {
        this.reasonslist = res.msg.result;
      });
    },
    formalCancel() {
      formalCancel(this.cancalobj).then(res => {
        this.showCancellocal = false;
        this.getDataList();
      });
    },

    //选择门店自动激活选中当前记录
    selItem(i) {
      this.order.orderCommoditys[i].isSelected = true;
    },

    //保存数据(发货)
    saveData() {
      this.$refs.expressForm.validate(valid => {
        if (valid) {
          if(!this.order.r_id){
            this.$message.error('请选择取消原因')
            return false
          }
          let _data = {};
          _data.oid = this.order.id;
          _data.id=this.order.r_id;
          _data.reason=this.order.reason
          formalCancel(_data).then(res => {
             this.$emit('success');
          });

          // if (this.express_type == 0) {
          //   localDelivery(_data)
          //     .then(res => {
          //       if (this.express_type == 0) {
          //         this.isLoading = false;
          //         this.$emit('success');
          //       } else {
          //         // this.dadaPay(res.msg[1]);
          //       }
          //     })
          //     .catch(e => {
          //       this.isLoading = false;
          //     });
          // } else {
          //   this.dadaPay();
          // }
        } else {
          //console.log('error')
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 15px;
}

//选择商品
.proSelect {
  width: 100%;
  border: 1px solid #dcdfe6;
  //margin-bottom: 10px;

  .phead {
    background: #f4f6f8;
    font-weight: 700;
    display: flex;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #dcdfe6;

    .name {
      flex: 1;
      padding-left: 10px;
    }

    .store {
      width: 180px;
      text-align: center;
    }

    .count {
      width: 80px;
      text-align: center;
    }

    .status {
      width: 80px;
      text-align: center;
    }

    .action {
      width: 100px;
      text-align: center;
    }
  }

  ul {
    margin: 0;
    max-height: 210px;
    overflow-y: auto;

    li {
      display: flex;
      cursor: pointer;
      line-height: 40px;
      padding: 10px 0;
      font-size: 13px;
      border-bottom: 1px solid #dcdfe6;
      padding-left: 10px;

      &:last-child {
        border-bottom: none;
      }

      .pro {
        display: flex;
        flex: 1;

        .txt {
          display: flex;
          padding-left: 10px;
          flex: 1;
          line-height: 18px;
          align-items: center;

          .mark {
            color: #f56c6c;
            background: #f2f4f6;
            display: table;
            border-radius: 5px;
            padding: 0 3px;
            margin-right: 3px;
          }
        }
      }

      .store {
        width: 180px;
        text-align: center;
      }

      .count {
        width: 80px;
        text-align: center;
      }

      .status {
        width: 80px;
        text-align: center;

        &.done {
          color: #67c23a;
        }

        &.none {
          color: #f56c6c;
        }
      }

      .action {
        width: 100px;
        text-align: center;
      }
    }
  }
}

.el-input {
  width: 270px;
}

.box {
  width: 100%;
  /*padding: 60px;
  height: calc(100vh - 77px);
  overflow: scroll;*/
}
</style>
